<script setup lang="ts">
import {computed, onMounted, ref, watch} from 'vue'
import {Close, Sort} from "@element-plus/icons-vue";
import {SetControllerService, SetOptionVO} from "../../generated";
import {useRouter} from "vue-router";

// 定义要发出的事件类型
const emit = defineEmits<{
  'update-filters': [{
    difficulty: string,
    status: number | '',
    tag: string[],
    questionSet: string,
    searchInput: string
  }]
}>()

const difficulty = ref('')
const status = ref<number | ''>('')
const tag = ref<string[]>([])
const questionSet = ref('')
const searchInput = ref('')

// 监听所有筛选条件的变化
watch(
    [difficulty, status, tag, questionSet, searchInput],
    () => {
      emit('update-filters', {
        difficulty: difficulty.value,
        status: status.value,
        tag: tag.value,
        questionSet: questionSet.value,
        searchInput: searchInput.value
      })
    },
    {deep: true}
)

const difficultyOptions = [
  {value: 'easy', label: '简单'},
  {value: 'medium', label: '中等'},
  {value: 'hard', label: '困难'}
]

const statusOptions = [
  {value: 0, label: '未开始'},
  {value: 1, label: '已解答'},
  {value: 2, label: '尝试过'}
]

const tagOptions = [
  {value: '数组', label: '数组'},
  {value: '字符串', label: '字符串'},
  {value: '动态规划', label: '动态规划'},
  {value: '树', label: '树'}
]

const questionSetOptions = ref<SetOptionVO[]>([])

const hasFilters = computed(() => {
  return difficulty.value ||
      status.value !== '' ||  // 只要不是空字符串就显示
      tag.value.length > 0 ||
      questionSet.value ||
      searchInput.value
})

const handleReset = () => {
  difficulty.value = ''
  status.value = ''
  tag.value = []
  questionSet.value = ''
  searchInput.value = ''
}

const getLabelByValue = (options: any[], value: string | number) => {
  const option = options.find(item => item.value === value)
  return option ? option.label : ''
}

let router = useRouter();

const handleRandomQuestion = () => {
  let randomId = Math.floor(Math.random() * 3787) + 1;
  router.push(`/question/detail/${randomId}`);
}

onMounted(async () => {
  let res = await SetControllerService.listRecommendUsingGet();
  if (res.code === 0) {
    questionSetOptions.value = res.data ? res.data : []
  }
})

// 添加 props 定义
const props = defineProps({
  showQuestionSet: {
    type: Boolean,
    default: true
  },
  showDifficulty: {
    type: Boolean,
    default: true
  },
  showStatus: {
    type: Boolean,
    default: true
  },
  showTags: {
    type: Boolean,
    default: true
  },
  showSearch: {
    type: Boolean,
    default: true
  },
  showRandomButton: {
    type: Boolean,
    default: true
  }
})
</script>

<template>
  <div class="toolbar">
    <el-select
        v-if="props.showQuestionSet"
        v-model="questionSet"
        placeholder="题集"
        class="toolbar-item"
    >
      <el-option
          v-for="item in questionSetOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>

    <el-select
        v-if="props.showDifficulty"
        v-model="difficulty"
        placeholder="难度"
        class="toolbar-item"
    >
      <el-option
          v-for="item in difficultyOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>

    <el-select
        v-if="props.showStatus"
        v-model="status"
        placeholder="状态"
        class="toolbar-item"
        disabled
    >
      <el-option
          v-for="item in statusOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>

    <el-select
        v-if="props.showTags"
        v-model="tag"
        multiple
        collapse-tags
        collapse-tags-tooltip
        placeholder="标签"
        class="toolbar-item"
    >
      <el-option
          v-for="item in tagOptions"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>

    <el-input
        v-if="props.showSearch"
        v-model="searchInput"
        placeholder="搜索题目"
        class="toolbar-item search-input"
    >
      <template #prefix>
        <el-icon>
          <Search/>
        </el-icon>
      </template>
    </el-input>

    <el-button
        v-if="props.showRandomButton"
        type="primary"
        @click="handleRandomQuestion"
        class="random-btn"
        :icon="Sort"
    >
      随机一题
    </el-button>
  </div>

  <div v-if="hasFilters" class="filter-tags">
    <el-tag
        v-if="showQuestionSet && questionSet"
        closable
        @close="questionSet = ''"
        class="filter-tag"
    >
      题集: {{ getLabelByValue(questionSetOptions, questionSet) }}
    </el-tag>

    <el-tag
        v-if="showDifficulty && difficulty"
        closable
        @close="difficulty = ''"
        class="filter-tag"
    >
      难度: {{ getLabelByValue(difficultyOptions, difficulty) }}
    </el-tag>

    <el-tag
        v-if="showStatus && status !== ''"
        closable
        @close="status = ''"
        class="filter-tag"
    >
      状态: {{ getLabelByValue(statusOptions, status) }}
    </el-tag>

    <el-tag
        v-if="showTags"
        v-for="tagValue in tag"
        :key="tagValue"
        closable
        @close="tag = tag.filter(t => t !== tagValue)"
        class="filter-tag"
    >
      标签: {{ getLabelByValue(tagOptions, tagValue) }}
    </el-tag>

    <el-button
        type="primary"
        link
        @click="handleReset"
        :icon="Close"
    >
      重置筛选
    </el-button>
  </div>
</template>

<style scoped>
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
  background-color: white;
  border-radius: 8px;
}

.toolbar-item {
  min-width: 100px;
  max-width: 150px;
  flex: 1;
}

.search-input {
  min-width: 245px;
  flex: 2 1 245px;
}

.random-btn {
  white-space: nowrap;
  flex: 0 0 auto;
}

@media screen and (max-width: 768px) {
  .toolbar {
    gap: 8px;
    padding: 12px;
  }

  .toolbar-item {
    min-width: calc(50% - 8px);
    max-width: none;
  }

  .search-input {
    flex: 1 1 100%;
  }

  .random-btn {
    width: 100%;
  }
}

@media screen and (max-width: 480px) {
  .toolbar-item {
    min-width: 100%;
  }
}

.filter-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding: 8px;
  background-color: white;
  border-radius: 8px;
}

.filter-tag {
  margin-right: 8px;
}

@media screen and (max-width: 768px) {
  .filter-tags {
    padding: 8px;
  }
}
</style>
